<template>
    <div class="summary">
        <span>全部任务({{ tasklist.length }})</span>
        <span>已完成({{ tasklist.length - store.unFinishedCount }})</span>
        <span class="unfinished">未完成( {{ store.unFinishedCount }} )</span>
    </div>
</template>

<script setup>

    import {useTasklistStore} from '../stores/tasklist'
    import { storeToRefs } from 'pinia'

    //调用useTasklistStore方法 获取store对象
    var store = useTasklistStore()

    //解构store
    var {tasklist} = storeToRefs(store);

</script>

<style scoped>
    .summary{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }
    .summary span{
        background-color: rgb(33, 146, 216);
        color: white;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        padding: 0 20px;
    }
    .summary span.unfinished{
        background-color: red;
    }
</style>